<template>
  <div class="edit-popup">
    <el-scrollbar class="h-[400px] sm:h-[600px]">
      <el-form-item label="权限" prop="menus">
        <div>
          <el-checkbox label="展开/折叠" @change="handleExpand" />
          <el-checkbox label="全选/不全选" @change="handleSelectAll" />
          <el-checkbox v-model="checkStrictly" label="父子联动" />
          <div>
            <el-tree
              ref="treeRef"
              :data="menuTree"
              :props="treeProp"
              :default-checked-keys="formData.menus"
              :check-strictly="!checkStrictly"
              node-key="nodeKey"
              :default-expand-all="isExpand"
              show-checkbox
            />
          </div>
        </div>
      </el-form-item>
    </el-scrollbar>
  </div>
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, defineComponent } from "vue";

const menuTreeComponment = defineComponent({
  props: {
    //已经选中的菜单数据
    selectIds: {
      type: Array<any>,
      default: [],
    },
    //是否显示选择框
    showCheckbox: {
      type: Boolean,
      default: true,
    },
    //是否使用dialog方式
    isDialog: {
      type: Boolean,
      default: true,
    },
    treeProp: {
      type: Object,
      default: {
        label: "label",
        children: "children",
      },
    },
    nodeKey: {
      type: String,
      default: "id",
    },
  },
  emits: ["confirm", "cancel", "close", "open"],
  setup(props, { emit }) {
    //定义响应式数据
    const isShow = ref(false);
  },
});
</script>
